import React from 'react';
import classNames from 'classnames';
import Checkbox from './Checkbox';

class Row extends React.Component {
    displayName = 'Row';

    state = {
        _id: 1
    }

    format (value, column, row) {
        if (column.type === 'checkbox') {
            return <Checkbox datum={this.props.datum} onChange={this.props.onChange} key={row.id} id={row.id} disabled={row.disabled}/>;
        }
        if (column.type === 'index') {
            return this.props.index + 1;
        }
        if (column.format && typeof column.format === 'function') {
            return column.format(value, column, row);
        }
        return value;
    }

    onMouseEnter = (e) => {
        this.props.data._hover = true;
        if (this.props.onHoverRow) {
            this.props.onHoverRow(this.props.data);
        }
    }

    onMouseLeave = () => {
        this.props.data._hover = false;
        if (this.props.onHoverRow) {
            this.props.onHoverRow(this.props.data);
        }
    }

    render () {
        const {data, columns} = this.props;
        const rowClass = classNames('cm-table-row', data.className, {
            'cm-table-row-hover': data._hover
        });
        return <tr style={{display: data._hide ? 'none' : ''}} className={rowClass} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
            {
                columns && columns.map(column => {
                    return <td key={column.name || column.type} className={column.className}>
                        <div className='cm-table-cell' style={{display: column._hide ? 'none' : 'block'}}>
                            <span>{this.format(data[column.name], column, data)}</span>
                        </div>
                    </td>;
                })
            }
        </tr>;
    }
}

export default Row;
